<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!--覆盖其原有的效果-->
		<link rel="stylesheet" href="css/app.css" />
	</head>

	<body>
		<!--导航-->
		<div class="side-nav" role="navigation">
			<ul class="nav-side-nav">
				<!--也可以添加一个date-title 来锁定每个页面是干什么的-->
				<li>
					<a class="tooltip-side-nav" href="#onepage"></a>
				</li>
				<li>
					<a class="tooltip-side-nav" href="#towpage"></a>
				</li>
				<li>
					<a class="tooltip-side-nav" href="#threepage"></a>
				</li>
				<li>
					<a class="tooltip-side-nav" href="#fourpage"></a>
				</li>
				<li>
					<a class="tooltip-side-nav" href="#five"></a>
				</li>
			</ul>
		</div>
		<!--第一页-->
		<div class="onepage" id="onepage">
			<!--id 引入图片 class 引入样式-->
			<div class="onepage-bg" id="onepagebg">
				<div class="container">
					<div class="row">
						<div class="title-text">
							<!--删格化系统-->
							<!--用户调试头部的字体headfontsize-->
							<div class="col-md-12 headfontsize">
								<h1 class="headh1content">
									淘学网<br />
									这是一个大学生自己的<br />
									购物网站
								</h1>
								<p style="margin-top: 50px;line-height: 33px;">只要你有耐心,你一定可以拿下,只要你有耐心,你一定可以拿下,只要你有耐心,你一定可以拿下</p>
								<p class="btn-app-stroe">
									<a class="btn btn-success btn-log" href="#">立即注册,开始购物</a>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--第二页-->
		<div class="towpage" id="towpage">
			<div class="towpage-text">
				<h1 class="towpage-text-h1">
					选择我你的第一个个宝贝进行购买<img src="img/图像0030.jpg" width="100%" height="80px"/>
				</h1>
			</div>
			<div class="row">
				<div class="towpage-courses col-md-4">
					<a href="#">
						<img src="img/3.png" style="width: 100%;" />
						<div class="classicn">
							<h3>认真学习哟</h3>
							<h1><strong>学习这个课程</strong></h1>
						</div>
					</a>
				</div>
				<div class="towpage-courses col-md-4">
					<a href="#">
						<img src="img/3.png" style="width: 100%;" />
						<div class="classicn">
							<h3>认真学习哟</h3>
							<h1><strong>学习这个课程</strong></h1>
						</div>
					</a>
				</div>
				<div class="towpage-courses col-md-4">
					<a href="#">
						<img src="img/3.png" style="width: 100%;" />
						<div class="classicn">
							<h3>认真学习哟</h3>
							<h1><strong>学习这个课程</strong></h1>
						</div>
					</a>
				</div>
				<div class="towpagebtn">
					<a id="towpage-easy" href="#" class="btn btn-success btn-lg">如果你想学习</a>
				</div>
			</div>
		</div>
		<!--第三页-->
		<div class="threepage" id="threepage">
			<div class="threepage-bg" id="threepagebg">
				<div class="threepagecontent">
					<div class="threepagetext">
						<p>只要你有耐心,相信程序对你而言,就是小菜一碟!只要你有耐心,相信程序对你而言,就是小菜一碟!
							<br/>只要你有耐心,相信程序对你而言,就是小菜一碟
						</p>
					</div>
					<a href="#" class="btn btn-success btn-lg htreepagebtncontent">赶快抢购吧,要下架了</a>
				</div>
			</div>
		</div>
		<!--第四页-->
        <div class="fourpage" id="fourpage">
			<div class="container" style="width: 700px;">
				<div class="coursexingqing-text">
					<h1> 要干活工具要到位</h1>
					<p>怎么才能做到最快的学习?</p>
				</div>
				<!--左右可切换 5秒滑动-->
				<div id="carousel-example-generic" class="carousel slide" data-interval="5000" style="height: 300px;">
					<ol class="carousel-indicators" style="margin-top: 200px;">
						<li data-target="#carousel-example-generic" data-slide="0" class="active"></li>
						<li data-target="#carousel-example-generic" data-slide="1" class=""></li>
						<li data-target="#carousel-example-generic" data-slide="1" class=""></li>
					</ol>
					<div class="carousel-inner">
						<div class="item active" style="width: 500px;">
							<img src="img/图像0030.jpg" />
						</div>
						<div class="item" style="width: 500px;">
							<img src="img/图像0030.jpg" />
						</div>
						<div class="item" style="width: 500px;">
							<img src="img/图像0030.jpg" />
						</div>
					</div>
					<a class="left carousel-control" href="#carousel-example-generic" data-slide="pre">
						<samp class="glyphicon glyphicon-chevron-left"></samp>
					</a>
					<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
						<samp class="glyphicon glyphicon-chevron-right"></samp>
					</a>
				</div>
			</div>
		</div>
		<!--第五页-->
		<div class="fivepage" id="five">
			<div class="fivepage-bg" id="fivepage">
				<div class="footertext">
					<h1>你孩子啊等待什么呢,赶快动手吧!</h1>
				</div>
				<div class="footerbtncenter">
					<div class="row">
						<a href="#">
							<div class="col-md-4">
								<img src="img/4.jpg" class="footerbtn queyeicon" />
							</div>
						</a>
						<a href="#">
							<div class="col-md-4">
								<img src="img/4.jpg" class="footerbtn queyeicon" />
							</div>
						</a>
						<a href="#">
							<div class="col-md-4">
								<img src="img/4.jpg" class="footerbtn queyeicon" />
							</div>
						</a>
					</div>
				</div>
				<div class="footertextbtn">
					<button type="button" class="btn btn-success btn-lg" style="font-size: 25px;">
						哈哈哈哈,点呀!
					</button>
					<p class="footertextbtn-text">
						只要你有耐心,就一定可找到自己喜爱的宝贝!
					</p>
				</div>
			</div>
		</div>
	</body>

</html>